<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>新增产品</title>
		<link rel="stylesheet" href="/mobile/layui/css/layui.css" />
		<link rel="stylesheet" href="/mobile/css/mobile.css" />
		<script src="/mobile/js/jquery.min.js"></script>
		<script src="/mobile/js/jquery.easing.min.js"></script>
		<script src="/mobile/layui/layui.js"></script>
		<style>
			.layui-form-item {
			    margin-bottom: 0;
			}

		</style>
	</head>
	<body>
		
		<div class="bg_gray_main" style="min-height: calc(100% - 41px);">
		    <div class="section layui-form" style="margin-bottom: 15px;">
				<div class="layui-form-item">
				   <label class="layui-form-label layui-padding-0"><span class="layui-font-red">*</span> 产品名称</label>
				   <div class="layui-input-block">
						<textarea id="textarea" maxlength="50" style="height: 72px;resize: none;padding: 3px 0 0;" placeholder="请输入产品名称" class="layui-border-none"></textarea>
						<span id="textarea_num" style="float: right; color: #999; font-size: 12px;">0/50</span>
				   </div>
				 </div>
			</div>
			<div class="section layui-form" style="margin-bottom: 15px;">
				<div class="layui-form-item">
				   <label class="layui-form-label layui-padding-0"><span class="layui-font-red">*</span> 产品型号</label>
				   <div class="layui-input-block">
				     <input type="text" id="chanpinxinghao" placeholder="请输入产品型号" class="layui-border-none">
				   </div>
				 </div>
			</div>
			<div class="section layui-form" style="margin-bottom: 15px;">
				<div class="layui-form-item">
				   <label class="layui-form-label layui-padding-0"><span class="layui-font-red">*</span> 产品类别</label>
				   <div class="layui-input-block">
				        <select id="category_id">
                          <option value="">请选择</option>
                          {volist name="category" id="item"}
                          <option value="{$item.id}">{$item.name}</option>
                          {/volist}

                        </select>
				   </div>
				 </div>
			</div>
			<div class="section layui-form" style="margin-bottom: 15px;">
				 <div class="layui-form-item">
				    <label class="layui-form-label layui-padding-0">产品图片</label>
				    <div class="layui-input-block" style="display:flex;justify-content:space-between;">
						<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="ID-upload-demo-btn">点击上传</button>
						<img id="image" src="" width="80px;height:auto">
						<input type="hidden" id="image_ipt" value="">
				    </div>
				  </div>
			</div>
			  
			
			<div class="section layui-form" style="margin-bottom: 35px;">
				<div class="layui-form-item">
				   <label class="layui-form-label layui-padding-0"><span class="layui-font-red">*</span> 产品用途</label>
				   <div class="layui-input-block">
						<textarea id="textarea1" maxlength="50"  style="height: 72px;resize: none;padding: 3px 0 0;" placeholder="请输入产品用途" class="layui-border-none"></textarea>
						<span id="textarea_num1" style="float: right; color: #999; font-size: 12px;">0/50</span>
				   </div>
				 </div>
			</div>
			<div class="section layui-form" style="margin-bottom: 35px;">
				<div class="layui-form-item">
				   <label class="layui-form-label layui-padding-0"><span class="layui-font-red">*</span> 产品特点</label>
				   <div class="layui-input-block">
						<textarea id="textarea2" maxlength="50"  style="height: 72px;resize: none;padding: 3px 0 0;" placeholder="请输入产品特点" class="layui-border-none"></textarea>
						<span id="textarea_num2" style="float: right; color: #999; font-size: 12px;">0/50</span>
				   </div>
				 </div>
			</div>
			<div class="btn">
			  <button type="button" class="layui-btn layui-btn-fluid layui-btn-normal layui-btn-radius" onclick="submit()">提交</button>
			</div>
		</div>
	</body>
	<script>
		$(function(){
			$("#textarea").bind('input propertychange', function() {
				$('#textarea_num').html($(this).val().length + '/50');
			});
			$("#textarea1").bind('input propertychange', function() {
				$('#textarea_num1').html($(this).val().length + '/50');
			});
			$("#textarea2").bind('input propertychange', function() {
				$('#textarea_num2').html($(this).val().length + '/50');
			});
		});
		
		layui.use(function(){
		  var upload = layui.upload;
		  var layer = layui.layer;
		  var element = layui.element;
		  var $ = layui.$;
		  // 单图片上传
		  var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: '/api.php/common/upload', // 实际使用时改成您自己的上传接口即可。
            before: function(obj){
              // 预读本地文件示例，不支持ie8
              obj.preview(function(index, file, result){
                $('#image').attr('src', result); // 图片链接（base64）
              });
              
              //layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                console.log(res);
              // 若上传失败
              if(res.code!=1){
                return layer.msg(res.msg);return false;
              }
              // 上传成功的一些操作
              $('#image_ipt').val(res.data.url);
            }
            
          });
		  
		});
		
	function submit(){
        
        if($('#textarea').val().trim()==''){
            layer.msg('请填写产品名称', {icon: 5});
            return false;
        }
        if($('#image_ipt').val().trim()==''){
            layer.msg('请上传产品图片', {icon: 5});
            return false;
        }
        if($('#chanpinxinghao').val().trim()==''){
            layer.msg('请输入产品型号', {icon: 5});
            return false;
        }
        if($('#category_id').val().trim()==''){
            layer.msg('请选择产品类别', {icon: 5});
            return false;
        }
        if($('#textarea1').val().trim()==''){
            layer.msg('请输入产品用途', {icon: 5});
            return false;
        }
        if($('#textarea2').val().trim()==''){
            layer.msg('请输入产品特点', {icon: 5});
            return false;
        }
        $.ajax({
          type:"POST",
          url:"/api.php/index/add_product",
          dataType:"json",
          data:{
              "name":$('#textarea').val().trim(),
              "image":$('#image_ipt').val().trim(),
              "chanpinxinghao":$('#chanpinxinghao').val().trim(),
              "category_id":$('#category_id').val().trim(),
              "yongtu_content":$('#textarea1').val().trim(),
              "tedian_content":$('#textarea2').val().trim(),
          },
          success:function(res){
              console.log(res);

              if(res.code==0){
                  layer.msg(res.msg,{icon:5});
    
              }else{
                  layer.msg(res.msg,{icon:6},function(){

    				  window.location.href="{:url('user/mycompany')}";
                  });
              }
          }
        });
    }	
		
	</script>
</html>